<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>小毛商城注册验证码</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <style>
        /* CSS 样式代码 */
        .container {
            max-width: 100%;
	    max-height: 100%;
            margin: 10 auto;
            padding: 14%;
            background: linear-gradient(to bottom, #ff9966, #ff5e62);
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            height: 100%; /* 添加容器高度 */
        }
        .animated {
            animation-duration: 1s;
            animation-fill-mode: both;
        }
        .fadeInUp {
            animation-name: fadeInUp;
        }
        .code {
            font-size: 36px;
            font-weight: bold;
            color: #ffffff;
            background: linear-gradient(to right, #ff5e62, #ff9966);
            padding: 5px 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container animated fadeInUp">
        <h2>尊敬的用户，您好！</h2>
        <p>感谢您注册小毛商城。</p>
        <p>您的验证码是：<span class="code">{{ code }}</span>，请在5分钟内使用，过期后需重新获取验证码。</p>
        <p>请勿将验证码泄露给他人，并在注册页面输入验证码以完成验证。</p>
        <p>祝您购物愉快！</p>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
    <script>
        // 初始化 AOS
        AOS.init();
    </script>
</body>
</html>
